<template>
  <div class="home">
    <input type="text" v-model="food">
    <!-- v-memo中“valueA”若不发生变化，则不会进行更新 -->
    <div :id="Math.ceil(Math.random()*10000)" v-memo="[valueA]">
      <div  class="box" v-for="item in arr" :key="item">  {{ foodObj[food] }}  </div>
    </div> 
  </div>
</template>
<script setup>
import { ref, watch } from "vue"

// 先生成1000条数据
const arr = new Array(1000)

// 定义一个对象
const foodObj = {
  'hb':' 2',
  'nc':' 3',
  'st':' 5',
}

// input绑定的值
const food = ref('hb')

// v-memo依赖的值
const valueA = ref(0)

// 如果数据发生变化，并且在foodObj对象中存在。视图进行更新。否则视图不更新。
watch(()=>food.value,()=>{
  if(Object.keys(foodObj).includes(food.value)){
    valueA.value = Math.ceil(Math.random()*10000)
  }
})
</script>

<style>
.box {
   display: inline-block;
   width: 80px;
}
</style>